<template>
  <div flex flex-col class="color-content"
    style="width: 160px; ">
    <div 主区域 h0 flex-1>
      <my-bar>资源管理器</my-bar>
      <el-tree style="background: transparent"
        :icon="ElIconArrowRight" :data="data"
        :props="defaultProps" :default-expand-all="true"
        @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <ResourceFunction v-if="data.extra === 'graph'" :node="node" :data="data" />
          <div v-else flex items-center>
            <img v-if="data.icon" :src="`/icons/${data.icon}.png`" w5 h5 mr1>
            <div>{{ node.label }}</div>
          </div>
        </template>
      </el-tree>
      <ContextMenu title="新建" :context="null" :menu-items="[
        {
          title: '函数',
          action: () => {
            oBus.editParam()
            return true
          }
        }]" />
    </div>
    <div id="mp-resource" h0 flex-1 资源挂载点>
    </div>
  </div>

</template>

<script setup lang="ts">
import { oProject, oStorage } from '~/models/Project';
import type { ResourceTree } from '~/models/resource/rtree';
import { oBus } from '~/models/graph/editorbus';


const router = useRouter()

const handleNodeClick = (data: ResourceTree) => {
  if (data.url) {
    router.push(data.url)
  }
}

const data: ComputedRef<ResourceTree[]> = computed(() => {

  return [
    {
      label: '全局变量',
      icon: 'variable',
      url: '/globals'
    },
    {
      label: '函数',
      icon: 'function',
      children: oStorage.value!.graphs.map(graph => ({
        label: graph.name,
        icon: 'f',
        url: `/functions?id=${graph.id}`,

        extra: 'graph',
        graph,
      }))
    },
    {
      label: '程序集',
      icon: 'modules',
      url: '/assembly'
    },
    {
      label: 'Python运行平台',
      icon: 'python',
      url: '/python-settings'
    },
    {
      label: '测试页',
      icon: 'laboratory',
      url: '/test-page'
    },
  ]
})

const defaultProps = {
  children: 'children',
  label: 'label',
  icon: 'icon'
}
</script>